<template>
	<div id="ZhuZhuangTu03"></div>
</template>

<script setup>
	import { onMounted } from 'vue'
	import bizApprovalApi from '@/api/biz/bizApprovalApi'
	import { Bar } from '@antv/g2plot'

	const data = ref([])

	onMounted(() => {
		getData()
	})

	let stackedColumnPlot = null

	async function getData() {
		const res = await bizApprovalApi.bizSummarizationList()

		data.value = res.flatMap((item) => [
			{
				applicantDeptName: item.applicantDeptName,
				type: '全部审批',
				value: item.allApproval
			},
			{
				applicantDeptName: item.applicantDeptName,
				type: '已审批',
				value: item.successApproval
			},
			{
				applicantDeptName: item.applicantDeptName,
				type: '未审批',
				value: item.allApproval - item.successApproval
			}
		])

		if (!stackedColumnPlot) {
			stackedColumnPlot = new Bar('ZhuZhuangTu03', {
				data: data.value,
				isGroup: true, // 关键点：关闭分组，开启堆叠
				yField: 'applicantDeptName',
				xField: 'value',
				seriesField: 'type',
				label: {
					position: 'right',
					offset: 4
				},
				barStyle: {
					radius: [2, 2, 0, 0]
				}
			})

			stackedColumnPlot.render()
		}
	}

	// 监听数据变化，自动更新图表
	watch(
		() => data.value,
		(newData) => {
			if (newData.length > 0 && stackedColumnPlot) {
				stackedColumnPlot.changeData(newData)
			}
		}
	)
</script>
